{% extends "jqmobile/base.html" %}
{% load i18n jqmobile_tags%}

{% block navbar %}{% get_breadcrumb request.path %}{% endblock %}

{% block content %}
<form action="" class="panel" method="post" selected="true">{% csrf_token %}
    <h1>{% trans "Change Your Password" %}</h1>
    <div class="ui-bar ui-bar-e">{% trans "Please enter your old password, for security's sake, and then enter your new password twice so we can verify you typed it in correctly." %}</div>
    <div class="ui-body ui-body-c">
        <div data-role="fieldcontain">
            <label for="id_old_password" class="required">{% trans "Old password:" %} </label>
            {{ form.old_password }}
            {% if form.old_password.errors %}{{ form.old_password.errors }}{% endif %}
        </div>
        <div data-role="fieldcontain">
            <label for="id_new_password1" class="required">{% trans "New password:" %}</label>
            {{ form.new_password1 }}
            {% if form.new_password1.errors %}{{ form.new_password1.errors }}{% endif %}
        </div>
        <div data-role="fieldcontain">
            <label for="id_new_password2" class="required">{% trans "Confirm password:" %}</label>
            {{ form.new_password2 }}
            {% if form.new_password2.errors %}{{ form.new_password2.errors }}{% endif %}
        </div>
    </div>
</form>
{% endblock %}

{% block page.footer %}
<div for="footer_id" data-role="footer" class="ui-bar" data-position="fixed" data-backbtn="false">
	<a id="save-object" data-theme="b" data-iconpos="left" data-icon="check" onclick="document.forms[0].submit();">{% trans 'Change my password' %}</a>
	<a id="clear-object" data-theme="b" data-iconpos="left" data-icon="delete" onclick="document.forms[0].reset();" class="ui-btn-delete">{% trans "Clear" %}</a>
	
	<script>
    $(function(){
		$('#save-object').bind('click', function(){
            $('form:first').submit()
            return false
        })
	})
	</script>
</div>
{% endblock %}
